<!DOCTYPE html>

<title>凹语言棋盘放大镜</title>

<div style="text-align: center;">
  <canvas id="canvas" width="400" height="400"></canvas>
</div>

<div style="text-align: center;">
  <pre id="output"></pre>
</div>

<script type="module">
  import { WaApp } from "./app.js";

  let app = new WaApp();

  window.onload = () => {
    app.init().then((result) => {
      app.main();

      let preTimeStamp = 1;

      const canvas = document.getElementById("canvas");
      canvas.addEventListener("mousemove", (event) => {
        console.log(`x:${event.offsetX},y:${event.offsetY}`);
        app.OnMouseMove(event.offsetX, event.offsetY);
      });

      document.addEventListener('keyup', (event) => {
        switch (event.key) {
          case ' ':
            break;
          case 'r':
            break;
        }
      });

      let stepAnima = function (timeStamp) {
        app.StepGame();
        preTimeStamp = timeStamp;
        window.requestAnimationFrame(stepAnima);
      }
      window.requestAnimationFrame(stepAnima);
    })
  };
</script>
